<template>
    <div class="shortcut-menu" :style="{'justify-content':!global.isUndergraduate?'space-between':'flex-end'}">
        <!-- <p class="title">
            <img src="/static/images/icon/icon_shortcutmenu.png"/>
            <span>{{$t("workbench.commonManagement")}}</span>
        </p>
        <div class="shortcut-content">
            <ul class="shortcut-list">
                <li v-for="(shortcut, key) in shortcuts" :key="key" :class="{ 'student-li': !loginUserType}">
                    <router-link :to="shortcut.to" v-if="shortcut.target===undefined">
                        <img :src="shortcut.imgUrl">
                        <p>{{shortcut.text}}</p>
                    </router-link>
                    <a v-if="shortcut.target" :target="shortcut.target" :href="shortcut.to">
                        <img :src="shortcut.imgUrl">
                        <p>{{shortcut.text}}</p>
                    </a>
                </li>
            </ul>
            <div class="clear-both"></div>
        </div> -->
        <template v-for="(item, index) in quickChannel">
            <div class="module" :style="{'margin-left':global.isUndergraduate?'32px':0}" @click="handleClickModule(item)" :key="index">
                <img
                    class="icon"
                    :src="
                        item.iconPath
                            ? `/static/images/homeIcon/${item.iconPath}.png`
                            : '/static/images/homeIcon/template-shortcut.png'
                    "
                    alt=""
                />
                <div class="label">{{ item.authNameCh }}</div>
            </div>
        </template>
        <el-dialog class="dialog" :visible.sync="shortcutsSettingForm.visible">
            <span slot="title" style="font-size: 18px; color: #2b3b4e">
                {{ `选择快捷功能（可选6项,当前已选${shortcutsSettingForm.currentCheckedLength}）` }}
            </span>
            <div role="forceDisplay" class="forceDisplay">
                <template v-for="item in shortcutsSettingForm.forceDisplay">
                    <div :key="item.authId" class="content">
                        <img
                            :src="
                        item.iconPath
                            ? `/static/images/homeIcon/${item.iconPath}.png`
                            : '/static/images/homeIcon/template-shortcut.png'
                    "
                            alt=""
                        />
                        <div>
                            <el-checkbox
                                v-model="item.forcedDisplay"
                                :true-label="1"
                                :false-label="0"
                                disabled
                            ></el-checkbox>
                            <span style="font-size: 12px">{{ item.authNameCh }}</span>
                        </div>
                    </div>
                </template>
            </div>
            <div role="customDisplay" class="customDisplay">
                <template v-for="item in shortcutsSettingForm.customDislay">
                    <div :key="item.authId" class="content">
                        <img
                           :src="
                        item.iconPath
                            ? `/static/images/homeIcon/${item.iconPath}.png`
                            : '/static/images/homeIcon/template-shortcut.png'
                    "
                            alt=""
                        />
                        <div>
                            <el-checkbox
                                v-model="item.passageWay"
                                :true-label="1"
                                :false-label="0"
                                @change="(status) => customBoxChange(status, item)"
                            ></el-checkbox>
                            <span style="font-size: 12px">{{ item.authNameCh }}</span>
                        </div>
                    </div>
                </template>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateMenuList">保存</el-button>
                <el-button @click="shortcutsSettingForm.visible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { findAllInfoAuthByUserId, updateAuthorityMenuList } from 'common/src/api/user'
import { getSessionUserNoCache } from 'common/src/api/session'
import Bus from 'common/src/utils/bus'
import mixin from 'common/src/mixins/index';
export default {
    name: 'ShortcutMenuCard',
    mixins: [mixin],
    props: {
        loginUserType: {
            type: String,
        },
    },
    data() {
        return {
            allShortcuts: [
                {
                    text: '成绩录入',
                    to: '/courseScoreManage',
                    imgUrl: '/static/images/icon/icon_bigshortcut01.png',
                },
                {
                    text: '授课资格申请',
                    to: '/teacherQualificationApply',
                    imgUrl: '/static/images/icon/icon_bigshortcut02.png',
                },
                {
                    text: '教学进度录入',
                    to: '/progressAdd',
                    imgUrl: '/static/images/icon/icon_bigshortcut03.png',
                },
                {
                    text: '培养方案查询',
                    to: '/queryCultureScheme',
                    imgUrl: '/static/images/icon/icon_bigshortcut04.png',
                },
                // ,
                // {
                //     text: "迎新任务",
                //     to: "/welcome",
                //     imgUrl: "/static/images/icon/icon_bigshortcut05.png"
                // }
            ],
            studentAllShortcuts: [
                {
                    text: '成绩查询',
                    to: '/myScoreQuery',
                    imgUrl: '/static/images/icon/icon_gradeEntry.png',
                },
                {
                    text: '学籍信息',
                    to: '/StudentBaseInfo',
                    imgUrl: '/static/images/icon/icon_studentInfo.png',
                },
                {
                    text: '选课管理',
                    to: '/studentElect',
                    imgUrl: '/static/images/icon/icon_electiveCourse.png',
                },
                {
                    text: '培养方案',
                    to: '/myCultureScheme',
                    imgUrl: '/static/images/icon/icon_trainingProgram.png',
                },
            ], // 学生快捷菜单
            shortcuts: [],

            auths: [],
            quickChannel: [
                {
                    authNameCh: '定制功能',
                    iconPath: 'custom_entry',
                    authId: -2,
                },
            ],
            shortcutsSettingForm: {
                visible: false,
                forceDisplay: [], //强制显示列表
                customDislay: [], //自定义列表
                currentCheckedLength: 0, //当前选中列表：强制显示+用户自定义
                customDisplayChecked: [], //用户自定义选中
            },
        }
    },

    mounted() {
        this._init_()
    },
    methods: {
        async _init_() {
            let { code, data } = await getSessionUserNoCache()
            if (code !== 200) return
            this.auths = data.auths
            this.shortcutsSettingForm.forceDisplay = this.auths.filter(
                (item) => item.forcedDisplay == 1
            )
            //过滤首页快捷通道的菜单
            let quickChannel=[]
            if(this.shortcutsSettingForm.forceDisplay.length >= 6){
                    quickChannel = this.shortcutsSettingForm.forceDisplay.splice(0,6)
            }else{
                    quickChannel=this.auths.filter((item) => item.passageWay).splice(0,6).concat(this.quickChannel)
            }
            this.quickChannel = quickChannel
            //过滤当前选中的属于快捷通道的菜单个数
            this.shortcutsSettingForm.currentCheckedLength = this.auths.filter(
                (item) => item.passageWay == 1
            ).length
            //过滤自定义显示的菜单
            this.shortcutsSettingForm.customDislay = this.auths.filter(
                (item) => item.forcedDisplay == 2
            )
            //过滤选中的自定义菜单
            this.shortcutsSettingForm.customDisplayChecked = this.shortcutsSettingForm.customDislay.filter(
                (item) => item.passageWay
            )
        },
        filterMenus(list) {
            // 判断是否是学生
            if (!this.loginUserType)
                this.shortcuts = this.studentAllShortcuts.filter((item, i) => {
                    return list.some((ele, j) => {
                        return item.to == ele.urlPath
                    })
                })
            else
                this.shortcuts = this.allShortcuts.filter((item, i) => {
                    return list.some((ele, j) => {
                        return item.to == ele.urlPath
                    })
                })
        },
        handleClickModule(option) {
            let urlPath = option.urlPath
            if (urlPath) {
                this.$router.push(urlPath)
            } else {
                this.shortcutsSettingForm.visible = true
            }
        },
        async queryMenuList(roleType) {
            let { code, data } = await getAuthorities({ roleType: roleType })
            if (code !== 200) return
            this.menus = this.$utils.listToTree(
                'authId',
                'parentAuthId',
                data.filter((item) => item.type !== 2)
            )
        },
        customBoxChange(status, option) {
            let checkedList = this.shortcutsSettingForm.customDisplayChecked
            if (status == 1) {
                if (this.shortcutsSettingForm.currentCheckedLength + 1 > 6) {
                    option.passageWay = 0
                    this.$message({
                        type: 'warning',
                        message: '最多可选6项',
                    })
                    return
                }
                this.shortcutsSettingForm.currentCheckedLength++
            } else {
                this.shortcutsSettingForm.currentCheckedLength--
            }
            checkedList.push(option)
            this.shortcutsSettingForm.customDisplayChecked = _.unionBy(checkedList, 'authId')
        },
        async updateMenuList() {
            let checkedList = this.shortcutsSettingForm.customDisplayChecked
            let { code } = await updateAuthorityMenuList(checkedList)
            if (code !== 200) return
            this.$message({
                type: 'success',
                message: '保存成功',
            })
            this.shortcutsSettingForm.visible = false
            Object.assign(this.$data, this.$options.data.call(this))
            this._init_()
        },
    },
    destroyed(){
        Object.assign(this.$data, this.$options.data.call(this));
    }
}
</script>
<style lang="scss" scoped>
.more-link {
    float: right;
    margin-top: 20px;
    font-size: 12px;
}
.shortcut-content {
    // height: 265px;
    overflow: hidden;
    // overflow-y: auto;
    // overflow-x: hidden;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #d4d8dc;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #fff;
    }
}
.shortcut-list {
    list-style-type: none;
    min-height: 250px;
    padding: 0;
    margin: 0px;
}
.shortcut-list li {
    float: left;
    width: 25%;
    // margin: 0 32px;
    padding: 16px 5px;
    text-align: center;
    cursor: pointer;
    transition: 0.32s cubic-bezier(0.42, 1.94, 0.78, 0.95);
}
.shortcut-list li.student-li {
    width: 50%;
}
.shortcut-list li:hover {
    transform: scale(1.05);
}
.shortcut-list li img {
    width: 72px;
    height: 72px;
    vertical-align: top;
}
.shortcut-list li p {
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    height: 16px;
    color: #2b3b4e;
    margin-top: 8px;
}
.shortcut-menu {
    display: flex;
    flex: 1;
    padding: 26px 0;
    flex-direction: row;
    
    align-items: flex-start;
    .module {
        cursor: pointer;
        text-align: center;
        .icon {
            width: 56px;
            height: 56px;
            border-radius: 40px;
            border: 1px dashed #bec7d1;
            background: #e8f1ff;
        }
        .label {
            margin-top: 8px;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            color:#2B3B4E;
        }
    }
    .dialog {
        ::v-deep {
            .el-dialog__header {
                padding: 20px 12px 10px;
            }
            .content {
                width: 80px;
                text-align: center;
                margin-right: 24px;
                margin-bottom: 20px;
            }
        }
        img {
            width: 56px;
            height: 56px;
            background-color: #3a7fe8;
            border-radius: 28px;
            margin-bottom: 8px;
        }
        .el-checkbox {
            width: 12px;
            height: 12px;
        }
        ::v-deep {
            .el-checkbox {
                margin: 0;
            }
        }
        .customDisplay {
            height: 250px;
            overflow-y: scroll;
            overflow-x: hidden;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .forceDisplay {
            display: flex;
            justify-content: flex-start;
        }
    }
    // padding: 24px;
    // height: 100%;
    // overflow: hidden;
    // .title {
    //     font-size: 18px;
    //     color: #2B3B4E;
    //     letter-spacing: 0;
    //     line-height: 24px;
    //     margin-bottom: 4px;
    //     font-weight: bolder;
    //     img {
    //         width: 24px;
    //         height: 24px;
    //         vertical-align: middle;
    //         margin-right: 8px;
    //     }
    //     span {
    //         vertical-align: middle;
    //     }
    // }
}
</style>